<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        user-select: none;
    }
    .drag{
        width: 1100px;
        height: 800px;
        margin: 20px auto;
        display: flex;
    }
    ul{
        display: flex;
        flex-direction: column;
    }
    ul li{
        width: 400px;
        padding: 10px;
        background-color: #42738c;
        list-style: none;
    }
    .target{
        width: 400px;
        min-height: 400px;
        border: 1px solid #03e00a;
    }
</style>
<body>
    <div class="drag">
        <ul>
            <!-- 拖拽元素 -->
            <li draggable="true">我是列表一</li>
            <li draggable="true">我是列表二</li>
            <li draggable="true">我是列表三</li>
            <li draggable="true">我是列表四</li>
            <li draggable="true">我是列表五</li>
            <li draggable="true">我是列表六</li>
        </ul>
            <!-- 目标元素 -->
        <div class="target">

        </div>
        <!-- 文字提示 -->
        <span class="text">文字提示</span>
    </div>
</body>
<script>
    // 拖拽元素
    let dragEl = document.querySelectorAll('li')
    // 目标元素
    let target = document.querySelector('.target')
    // 文字提示
    let text = document.querySelector('.text')
    let dom = null
    for(let i = 0;i<dragEl.length;i++){
        // 拖拽开始
        dragEl[i].ondragstart = (e) => {
            console.log("拖拽开始");
            dom = dragEl[i]
            let innerTExt = dragEl[i].innerText
            e.dataTransfer.setData('text',innerTExt)
        }
        dragEl[i].ondragend = () => {
            console.log("松开拖拽元素");
            dom = null
        }
    }

    target.ondragenter = () => {
        console.log("拖拽元素进入时候触发");
    }
    target.ondragover = (e) => {
        e.preventDefault() // 只有在这里阻止了默认行为ondrop才可以在这个的里面拿到事件对象e
        console.log("拖拽元素在目标元素上面的时候出发");
    }
    target.ondragleave = () => {
        console.log("拖拽元素离开目标元素时候出发");
    }
    target.ondrop = (e) => {
        console.log("拖拽元素在目标元素上面松手时候触发");
        text.innerHTML = '新拖入了' + e.dataTransfer.getData('text')
        target.appendChild(dom)
    }
</script>
</html>